<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>部门管理</title>
    <link rel="stylesheet" href="/static/css/element-ui/element-ui.css">
    <link rel="stylesheet" href="/static/css/public.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/element-ui.js"></script>
    <script src="/static/js/public.js"></script>
</head>
<body>
<div v-cloak id="app" class="mt-15">
    <%--添加按钮--%>
    <div class="text-right">
        <el-tooltip content="添加部门" placement="right" effect="light">
            <el-button @click="saveOrUpdateDept"
                       type="primary" icon="el-icon-plus"
                       circle></el-button>
        </el-tooltip>
    </div>
    <%--表格部分--%>
    <el-table size="small" class="mt-10"
              :data="paging.tableData"
              style="width: 100%">
        <el-table-column
                prop="name"
                label="部门名称"
                width="">
        </el-table-column>
        <el-table-column
                prop="adminNames"
                label="部门管理员"
                width="">
            <template slot-scope="scope">
                <el-tag class="ml-8" size="mini" v-for="item in getAdminNameList(scope.row.adminNames)">{{item}}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="description"
                label="部门描述"
                width="160">
            <template slot-scope="scope">
                <el-button @click="showDeptDescription(scope.row)" type="text"
                           size="mini">点击查看部门描述
                </el-button>
            </template>
        </el-table-column>
        <el-table-column
                prop="userCount"
                label="用户数量"
                width="120">
        </el-table-column>
        <el-table-column
                prop="description"
                label="部门成员"
                width="160">
            <template slot-scope="scope">
                <el-button :disabled="scope.row.userCount < 1" @click="showDeptUser(scope.row)" type="text"
                           size="mini">点击查看部门成员
                </el-button>
            </template>
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-tooltip content="修改部门" placement="top" effect="light">
                    <el-button @click="saveOrUpdateDept(scope.row)" type="primary" size="mini"
                               icon="el-icon-edit" circle></el-button>
                </el-tooltip>
                <el-tooltip content="删除部门" placement="top" effect="light">
                    <el-button @click="deleteDept(scope.row)" type="danger" size="mini"
                               :disabled="scope.row.userCount > 1"
                               icon="el-icon-delete" circle></el-button>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

    <%--分页部分--%>
    <div class="text-right">
        <el-pagination :hide-on-single-page="true"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="paging.currentPage"
                       :page-sizes="[10,20]"
                       :page-size="paging.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="paging.total">
        </el-pagination>
    </div>
    <div id="deptDescription" style="display: none; padding: 0 10px">
        <div v-html="currentObj.description"></div>
    </div>
</div>
<script src="/static/app/system/dept_index.js"></script>
</body>
</html>
